<template>
  <div class="app-container">
    <!-- 1. 顶部导航栏 -->
    <el-header class="header">
      <div class="header-inner">
        <span>我的简历</span>
        <span>未命名的简历</span>
        <div class="header-buttons">
          <el-button>翻译</el-button>
          <el-button type="primary">下载</el-button>
          <el-button>更多</el-button>
        </div>
      </div>
    </el-header>

    <!-- 2. 主体布局：Sidebar + 简历编辑区 -->
    <div class="main-layout">
      <!-- 左侧功能 Sidebar -->
      <el-aside width="120px" class="sidebar">
        <!-- 功能导航入口 -->
        <el-menu class="sidebar-menu" default-active="1">
          <el-menu-item index="1" icon="el-icon-magic-stick">AI 评分</el-menu-item>
          <el-menu-item index="2" icon="el-icon-menu">模块管理</el-menu-item>
          <el-menu-item index="3" icon="el-icon-document-copy">案例帮助</el-menu-item>
          <el-menu-item index="4" icon="el-icon-s-tools">模板样式</el-menu-item>
          <el-menu-item index="5" icon="el-icon-s-promotion">面试神器</el-menu-item>
          <el-menu-item index="6" icon="el-icon-s-opportunity">职位匹配</el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧信息栏 -->
      <el-aside width="240px" class="right-sidebar">
        <!-- AI 评分卡片 -->
        <div class="ai-score-card">
          <div class="score-info">
            <div class="score-display">
              <span class="score-label">AI 评分</span>
              <span class="score">42分</span>
            </div>
            <el-button type="danger" class="check-btn">检查</el-button>
            <p class="score-desc">您的简历打败了全国44.2%的用户，可根据AI建议优化或咨询导师指导，达到60分更可得到精准的职位推荐！</p>
          </div>
        </div>

        <!-- 导师推荐区域 -->
        <div class="mentor-card">
          <img src="https://via.placeholder.com/40" alt="导师头像" class="avatar" />
          <div class="mentor-info">
            <p class="mentor-name">文延敏</p>
            <p class="mentor-title">人力资源 · 互联网</p>
            <p class="mentor-stats">已帮19人 · 好评率100%</p>
          </div>
          <div class="mentor-buttons">
            <el-button size="mini">更多导师</el-button>
            <el-button size="mini" type="primary">¥36咨询</el-button>
          </div>
        </div>

        <!-- 信息完善提示区 -->
        <div class="form-tips">
          <h4>基本信息 - 2条</h4>
          <p>姓名是简历中必须填写的重要信息，请完善</p>
          <p>邮箱是简历中必须填写的重要信息，请完善</p>

          <h4>教育经历 - 5条</h4>
          <p>教育经历中，学历信息是必须的重要项目，请补充完整</p>
          <p>教育经历中，专业是必须的重要项目，请补充完整</p>
          <p>教育经历中，校名是必须的重要项目，请补充完整</p>
          <p>请补充教育经历模块这段经历的日期</p>
          <p>教育经历中的内容仍然为原始的模板内容，请修改</p>
        </div>
      </el-aside>

      <!-- 右侧简历编辑区 -->
      <el-main class="resume-editor">
        <!-- 编辑工具栏 -->
        <div class="editor-toolbar">
          <el-button>自动一页</el-button>
          <el-button>自动排版</el-button>
          <el-button>华文楷体</el-button>
          <el-button>13</el-button>
          <el-button>颜色背景</el-button>
          <el-button>行间距</el-button>
          <el-button>横向间距</el-button>
          <el-button>页边距</el-button>
          <el-button>基本信息</el-button>
          <el-button>模块设置</el-button>
          <el-button>日期设置</el-button>
          <el-button>添加模块</el-button>
        </div>

        <!-- 简历内容区域 -->
        <div class="resume-content">
          <!-- 简历头部：姓名、电话 -->
          <div class="resume-header">
            <h1>{{ resumeData.basicInfo.name || '姓名' }}</h1>
            <p>{{ resumeData.basicInfo.phone || '135-332-5467' }}</p>
            <div class="photo-upload">
              <el-button size="mini" @click="handleUploadPhoto">上传照片</el-button>
            </div>
          </div>

          <!-- 动态渲染各模块 -->
          <ResumeSection v-for="section in resumeData.sections" :key="section.title" :section="section" />
        </div>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import ResumeSection from './components/ResumeSection.vue';

// 模拟简历数据（后续可替换为接口获取）
const resumeData = reactive({
  basicInfo: {
    name: '张三',
    phone: '135-332-5467'
  },
  sections: [
    {
      title: '教育经历',
      items: [
        { value: 'XXX大学（冲击985） | 计算机科学与技术 | 2021.09 - 2025.06' },
        { label: '平均绩点', value: '3.8/4.0 (专业前5%)' },
        { label: '主修课程', value: '数据结构、算法分析、数据库系统、计算机网络、操作系统' },
        { label: '荣誉奖项', value: '连续3年获得校级一等奖学金；突出表现奖学金；优秀毕业生' }
      ]
    },
    {
      title: '实习工作经历',
      items: [
        { value: 'ABC科技有限公司 | Java实习 | 2025.02 - 2025.05' },
        { label: '项目名称', value: '企业级数据分析平台' },
        { label: '职责描述', value: '作为核心参与者负责数据采集模块的设计与开发，优化数据处理流程，提升数据处理效率30%；参与后端接口开发，实现RESTful API 20+个；进行数据库设计与优化，提高查询性能' },
        { label: '技术栈', value: 'Java、Spring Boot、MyBatis、MySQL、Redis、Elasticsearch' }
      ]
    },
    {
      title: '项目经历',
      items: [
        { value: '校园二手交易平台 | 负责人 | 2024.03 - 2024.09' },
        { label: '项目描述', value: '开发基于Web的校园二手交易平台，支持商品发布、搜索、交易等功能，解决校园内二手物品流通问题' },
        { label: '技术栈', value: 'Vue 3 + Node.js + MongoDB + Express' },
        { label: '主要贡献', value: '负责整体架构设计与前端开发，实现商品搜索、购物车、订单管理等核心功能；设计并实现数据库 schema，优化查询性能；部署项目至云服务器，支持500+用户同时在线使用' }
      ]
    },
    {
      title: '组织及活动经历',
      items: [
        { value: '校计算机协会 | 会长 | 2023.09 - 2024.09' },
        { label: '主要职责', value: '负责协会日常运营与活动策划，组织技术讲座、编程比赛等活动10+场，参与人数超过500人' },
        { label: '成果', value: '组织校园编程大赛，吸引100+学生参与，获得校级优秀社团称号' },
        { value: '志愿者协会 | 成员 | 2022.09 - 2023.09' },
        { label: '主要活动', value: '参与社区服务、校园迎新等志愿活动20+次，累计服务时长超过100小时' }
      ]
    },
    {
      title: '技能/证书及其他',
      items: [
        { label: '专业技能', value: '编程语言：Java、JavaScript、Python；Web开发：HTML、CSS、Vue、React；数据库：MySQL、MongoDB；工具：Git、Maven、Docker' },
        { label: '证书', value: '大学英语六级（CET-6）；计算机技术与软件专业技术资格（初级）；阿里云云计算助理工程师' },
        { label: '语言能力', value: '英语：CET-6，具备良好的听说读写能力；普通话：二级甲等' },
        { label: '兴趣爱好', value: '编程、阅读、跑步、羽毛球' }
      ]
    },
    {
      title: '个人总结',
      items: [
        { value: '计算机科学与技术专业本科毕业生，具备扎实的专业基础知识和较强的实践能力。有丰富的项目开发经验，熟悉Java、JavaScript等编程语言和Web开发技术栈。具备良好的团队协作精神、沟通能力和学习能力，能够快速适应新环境和新技术。积极向上，吃苦耐劳，有强烈的责任心和进取心，希望能在软件开发领域不断成长和进步。' }
      ]
    }
  ]
});

// 模拟上传照片方法（后续可替换为真实接口）
const handleUploadPhoto = () => {
  console.log('触发上传照片逻辑...');
};
</script>

<style scoped>
/* 全局容器：占满视口高度 */
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 - 固定在顶部 */
.header {
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  width: 100%;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.header-buttons button {
  margin-left: 10px;
}

/* 主体布局：Sidebar + 编辑区 */
.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden; /* 防止内容溢出 */
  margin-top: 60px; /* 顶部导航栏高度 */
}

/* 左侧 Sidebar */
.sidebar {
  background: #f5f7fa;
  overflow-y: auto; /* 内容超出时滚动 */
}
.ai-score-card {
  padding: 20px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin: 10px;
  border-radius: 8px;
}
.score-info {
  margin-top: 10px;
}
.score-display {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.score-label {
  font-size: 16px;
  margin-right: 10px;
}
.score {
  font-size: 32px;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 15px;
}
.check-btn {
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
}
.score-desc {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
  line-height: 1.5;
}
.sidebar-menu {
  border-right: none; /* 去掉 Element Plus 默认边框 */
  margin-bottom: 20px;
}
.mentor-card {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.mentor-card .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.mentor-info {
  margin-bottom: 10px;
}
.mentor-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 3px;
}
.mentor-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 3px;
}
.mentor-stats {
  font-size: 14px;
  color: #999;
}
.mentor-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.mentor-buttons button {
  flex: 1;
  margin: 0 5px;
}
.form-tips {
  font-size: 14px;
  color: #666;
  padding: 15px;
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.form-tips h4 {
  margin: 10px 0;
  font-size: 16px;
  color: #333;
}
.form-tips p {
  margin: 6px 0;
  line-height: 1.5;
}

/* 右侧简历编辑区 */
.resume-editor {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #fff;
}
.editor-toolbar {
  display: flex;
  flex-wrap: wrap; /* 自适应换行 */
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.resume-content {
  max-width: 800px; /* 模拟A4纸宽度 */
  margin: 0 auto;
  line-height: 1.6;
  padding: 30px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.resume-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.resume-header h1 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}
.resume-header p {
  color: #666;
}
.photo-upload {
  position: absolute;
  top: 0;
  right: 0;
}
.resume-section {
  margin-bottom: 25px;
}
.resume-section h2 {
  font-size: 18px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
  color: #333;
}
.section-item {
  margin: 10px 0;
  line-height: 1.6;
}
.section-item strong {
  color: #333;
}
</style>